<template>
	<view>
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">房间列表</block>
		</cu-custom>
		<view class="live-container flex">
			<view class="live-box" v-for="(item, index) in roomList" :key="index">
				<view class="cu-card case" @click="getEnter(item)">
					<view class="cu-item shadow">
						<view class="flex align-center">
							<view class="cu-avatar round sm" :style="'background-image:url(' + item.anchorImg + ');'">
							</view>
							<view class="text-sm margin-left-xs overflow-1">{{item.anchorName}}</view>
						</view>
						<view class="margin-top-sm">
							<image :src="item.coverImg" class="live-image radius"></image>
							<view class="cu-tag bg-red" v-if="item.liveStatus == 101"><text
									class="cuIcon-playfill"></text>进行中</view>
						</view>
						<text class="text-cut overflow-2 margin-top-sm">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view :class="'cu-load bg-gray ' + (roomList.length>0?'':'over')"></view>
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@/utils/util.js");
	let livePlayer = requirePlugin('live-player-plugin')
	import api from '@/utils/api'
	
	export default {
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				CustomBar: this.CustomBar,
				util: util,
				roomList: [],
				userInfo: null
			};
		},

		components: {},
		props: {},
		
		onLoad(options) {
			app.initPage().then(res => {
				this.liveRoomInfoList();
				this.userInfo = uni.getStorageSync('user_info')
			});
		},

		methods: {
			liveRoomInfoList() {
				api.liveRoomInfoList().then(res => {
					this.roomList = res.data;
				});
			},
			getEnter(item) {
				let curDateTime = this.util.formatTime(new Date()); //当前时间
				let obj = {
					roomId: item.roomId,
					openId: this.userInfo.wxUseropenId,
					userName: this.userInfo.nickName,
					insiderId: this.userInfo.insiderId,
					enterTime: curDateTime
				}
				api.wxmaliveuserEnter(obj).then(res => {
					uni.navigateTo({
						url: 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.roomId
					})
				});
			}

		}
	};
</script>
<style>
	.live-container {
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: content-box;
		padding: 20rpx;
	}

	.live-box {
		width: 349rpx;
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.live-image {
		width: 300rpx;
		height: 300rpx;
	}
</style>
